CSSの基本（16）−HTMLバージョンの指定
これまでの講座で、CSSを使ってサイズや背景、枠線、内部余白、外部余白などを指定する方法を紹介しました。今回は、これらの関係をもう一度復習しておきましょう。さらに、CSSでサイズを指定する際に必須となる「HTMLバージョンの指定」についても解説します。

→ 背景、枠線、余白のまとめ
 
これまで数週にわたって、背景色（background-color）、サイズ（width、height）、枠線（border）、内部余白（padding）、外部余白（margin）を指定方法を紹介してきました。これらの関係を図にまとめると以下のようになります。ここで注目していただきたいのが、widthやheightが要素そのもののサイズを指定することです。サイズ指定には、枠線や内部余白の大きさが含まれないことに注意してください。
サンプル画像


→ HTMLバージョンの指定の必要性
 
それでは、具体的な例を見ていきましょう。以下のサンプルは、画像を横幅320ピクセルで表示し、その周囲に40ピクセルの内部余白を設けて枠線（点線）を描くCSSです。しかし、これをInternet Explorerで見ると、内部余白ナシで表示されてしまう場合があります。画像はもともと横幅320ピクセルなので、これは少しおかしな話ですね。このような現象が生じるのは、HTMLのバージョンを示していないことが原因です。なお、Netscape Navigatorの場合は、正しく内部余白が表示されます。
<IMG src="tree.jpg" style="width:320px; padding:40px; border:2px #FF0000 dashed"> サンプルページ


→ HTMLバージョンの指定の必要性
 
先ほどの不具合を解消するには、「!DOCTYPE」タグでHTMLのバージョンを示しておく必要があります。通常、「!DOCTYPE」は以下のとおりに記述します。この記述は、必ず「HTML」タグより前に配置しなければいけません。この記述を加えて先ほどと同じCSS指定を行うと、Internet Explorerでも正しく内部余白が表示されるようになります。CSSのwidthやheightを使ってサイズを指定する場合は、以下の最初の1行の記述を忘れないようにしてください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<HTML>
　：
<IMG src="tree.jpg" style="width:320px; padding:40px; border:2px #FF0000 dashed">
　：
</HTML>		 サンプルページ


G�|�C���g�|�C���@Amazon Yahoo �y�V

�����z�[���y�[�W �y�V���o�C��[UNLIMIT��������1�~] �C�O�i���q���� �C�O���s�����������I